<template>
  <div>
    <div class="detail-container">
      <div class="title">
        <div class="name">
          网关明细
        </div>
        <div style="display: flex;align-items: center;line-height: 1">
          <div class="living">
            <div class="status" :class="{'off': detailInfo.lineStatus !== 'ONLINE'}"></div>
            {{detailInfo.lineStatus === 'ONLINE' ? '在线' : '离线'}}
          </div>
          <div class="type">
            <span>{{detailInfo.wanType.toUpperCase()}}</span>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="left">
          <div>
            网关序列号: <span>{{detailInfo.deviceSN}}</span>
          </div>
          <div>
            产品序列号: <span>{{detailInfo.productSN}}</span>
          </div>
          <div>
            硬件版本号: <span>{{detailInfo.hwVersion}}</span>
          </div>
          <div>
            软件版本号: <span>{{detailInfo.swVersion}}</span>
          </div>
        </div>
        <div class="right">
          <div>
            产品型号: <span>{{detailInfo.productName}}</span>
          </div>
          <div>
            生产日期: <span>{{detailInfo.pd}}</span>
          </div>
          <div>
            硬件名称: <span>{{detailInfo.hardware}}</span>
          </div>
          <div>
            软件名称: <span>{{detailInfo.software}}</span>
          </div>
        </div>
      </div>
    </div>
    <q-separator />
  </div>
</template>

<script>
export default {
  name: 'gateway-detail',
  props: {
    detailInfo: {
      type: Object,
      default: () => ({
        wanType: '--',
        productSN: '--',
        productName: '--',
        deviceSN: '--',
        hwVersion: '--',
        swVersion: '--',
        software: '--',
        hardware: '--',
        lineStatus: '--',
        pd: '--'
      })
    }
  },
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>

<style scoped lang="stylus">
.detail-container
  padding 20px
  .title
    display flex
    justify-content space-between
    .name
      line-height 1
      font-weight 500
      color $primary
      font-size 16px
    .living
      text-align right
      margin-left 10px
      margin-right 8px
      position relative
      width 43px
      .status
        width 10px
        height 10px
        border-radius 50%
        background $positive
        position absolute
        left 0
        top 2px
      .off
        background #666666

  .content
    margin-top 20px
    display flex
    .left,
    .right
      width 50%
      color #333333
      line-height 1.779
</style>
